<template>
  <div class="gatherRecord">
    <CustomNavBar :title="t('Record')"> </CustomNavBar>
    <div class="container">
      <van-list
        @load="getRecordList"
        v-model:loading="loading"
        :loading-text="t('loading......')"
        :finished="finished"
        :finishedText="t('No more data')"
      >
        <van-cell v-for="(e, i) in recordList" :key="e.id">
          <div class="cell">
            <div  class="cell-item">
              <div  class="cell-item-box">
                <div  class="cell-item-box-number">{{i + 1}}</div>
              </div>
              <div  class="cell-item-box">
                <div  class="cell-item-box-name">
                  {{t('order number')}}
                </div>
                <div  class="cell-item-box-value">
                  {{e.order_number}}
                </div>
              </div>
              <div  class="cell-item-box">
                <div  class="cell-item-box-name">
                  {{t('Initiating Organization')}}
                </div>
                <div  class="cell-item-box-value amount">
                  {{e.sponsor_org}}
                </div>
              </div>
              <div  class="cell-item-box arrears">
                <div  class="cell-item-box-name">{{t('arrears')}}</div>
                <div  class="cell-item-box-value">{{decimalpre(e.arrears)}}</div>
              </div>
              <div  class="cell-item-box">
                <div  class="cell-item-box-name">{{t('Status')}}</div>
                <div  class="cell-item-box-value">{{e.status}}</div>
              </div>
              <div  class="cell-item-box">
                <div  class="cell-item-box-name">{{t('Revenue')}}</div>
                <div
                  class="cell-item-box-value"
                  style="color: rgb(2, 175, 116)"
                >
                  ₹{{decimalpre(e.revenue)}}
                </div>
              </div>
              <div  class="cell-item-box">
                <div  class="cell-item-box-name">
                  {{t('daily profit')}}
                </div>
                <div  class="cell-item-box-value amount">
                  {{e.revenue_ratio * 100}} %
                </div>
              </div>
              <div  class="cell-item-box">
                <div  class="cell-item-box-name">{{t('Cycle')}}</div>
                <div  class="cell-item-box-value">{{t('{cycle} days', e)}}</div>
              </div>
              <div  class="cell-item-box">
                <div  class="cell-item-box-name">
                 {{t('Enter Amount')}}
                </div>
                <div  class="cell-item-box-value amount">
                  {{decimalpre(e.amount)}}
                </div>
              </div>
              <div  class="cell-item-time">
                <div  class="cell-item-box">
                  <div  class="cell-item-box-name">
                    {{t('Position Building Time')}}
                  </div>
                  <div  class="cell-item-box-value">
                    {{date(e.position_time, 'YYYY/MM/DD')}}
                  </div>
                </div>
                <div  class="cell-item-box">
                  <div  class="cell-item-box-name">
                    {{t('settlement time')}}
                  </div>
                  <div  class="cell-item-box-value">
                    {{date(e.settlement_time, 'YYYY/MM/DD')}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import  {get, post} from '@/utils/request'
import { decimalpre, date } from '@/utils/util'
import { t } from '@/languages'
const recordList = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)

async function getRecordList() {
 try {
    const res = await get('/api/app/quant/records/', {
      page: page.value,
      limit: 20
    })
    recordList.value = recordList.value.concat(res.data || [])
    finished.value = true
    if(recordList.value.length === res.count) {
      finished.value = true
    } else  {
      page.value += 1
    }
 } catch (error) {
   console.log(error)
   finished.value = true
 } finally {
   loading.value = false
 }
}
</script>
<style lang="scss">
.gatherRecord .container .cell {
    padding: .26667rem
}

.gatherRecord .container .cell-item {
    border: .02667rem solid #2b4e5a;
    border-radius: .21333rem;
    margin-bottom: .26667rem
}

.gatherRecord .container .cell-item .arrears .cell-item-box-name,.gatherRecord .container .cell-item .arrears .cell-item-box-value {
    color: red
}

.gatherRecord .container .cell-item .cell-item-box {
    padding: .13333rem;
    display: flex;
    justify-content: space-between;
    border-bottom: .02667rem dotted #2b4e5a
}

.gatherRecord .container .cell-item .cell-item-box .cell-item-box-number {
    width: .8rem;
    height: .8rem;
    border-radius: .8rem;
    background-color: #325d79;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center
}

.gatherRecord .container .cell-item .cell-item-time {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.gatherRecord .container .cell-item .cell-item-time .cell-item-box {
    border-bottom: none;
    align-items: center;
    flex: 1
}

.gatherRecord .container .cell-item .cell-item-time .cell-item-box .cell-item-box-name {
    flex: 1
}

.gatherRecord .container .cell-item .cell-item-time .cell-item-box .cell-item-box-value {
    text-align: center;
    flex: 2
}

.gatherRecord .container .cell-item .cell-item-box-name {
    color: #fff;
    font-size: .32rem
}

.gatherRecord .container .cell-item .cell-item-box-value {
    color: #fff;
    font-size: .37333rem
}

.gatherRecord .container .cell-item .amount {
    color: #62f792
}

.gatherRecord .container .cell-item .cell-item-box-color {
    color: red
}

</style>
